<template>
  <div class="content">
    <el-dialog
      :title="!editing ? '添加船舶信息' : '编辑船舶信息'"
      :visible.sync="shipShow"
      width="50%"
    >
      <el-form :model="shipModelMessage" label-width="130px" :rules="rules">
        <!-- 第一页 -->
        <div v-if="shipPage == 1" class="form-content">
          <el-form-item label="船舶名称" class="form-box" prop="deptName">
            <el-input
              v-model="shipModelMessage.deptName"
              placeholder="请输入船舶名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="船舶英文名称" class="form-box">
            <el-input
              v-model="shipModelMessage.enName"
              placeholder="请输入船舶英文名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理公司" class="form-box">
            <el-select
              style="width: 100%"
              v-model="shipModelMessage.companyId"
              placeholder="请选择管理公司"
              @change="changeCompany"
              :disabled="editUser.role.id != 1 ? true : false"
            >
              <el-option
                :label="item.deptName"
                :value="item.id"
                v-for="(item, index) in companyShips"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="绑定船队" class="form-box">
            <el-select
              class="main-select-tree"
              ref="selectTree"
              style="width: 100%"
              placeholder="请选择船队"
              clearable
              v-model="shipModelMessage.parentName"
            >
              <el-option :label="1" :value="2" style="display: none" />
              <el-tree
                :data="departmentData"
                :props="departmentProps"
                @node-click="addDepartmentChange"
              ></el-tree>
            </el-select>
          </el-form-item>
          <el-form-item label="船东" class="form-box">
            <el-select
              style="width: 100%"
              v-model="shipModelMessage.ownerId"
              placeholder="请选择船东"
            >
              <el-option
                :label="item.owner"
                :value="item.id"
                v-for="(item, index) in ownerList"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="船舶IMO号" class="form-box" prop="imo">
            <el-input
              v-model="shipModelMessage.imo"
              placeholder="请输入船舶IMO号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="船舶统一识别号"
            class="form-box"
            prop="identification"
          >
            <el-input
              v-model="shipModelMessage.identification"
              placeholder="请输入船舶统一识别号"
            ></el-input>
          </el-form-item>
          <el-form-item label="船旗国" class="form-box">
            <el-input
              v-model="shipModelMessage.country"
              placeholder="请输入船旗国"
            ></el-input>
          </el-form-item>
          <el-form-item label="船籍港" class="form-box">
            <el-input
              v-model="shipModelMessage.port"
              placeholder="请输入船籍港"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="Ai识别Id" class="form-box">
            <el-input
              v-model="shipModelMessage.boxId"
              placeholder="请输入Ai识别Id"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="船舶状态" class="form-box">
            <el-select
              v-model="shipModelMessage.status"
              style="width: 100%"
              placeholder="请选择船舶状态"
            >
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="船长姓名" class="form-box">
            <el-input
              v-model="shipModelMessage.shipName"
              placeholder="请输入船长姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="船长电话" class="form-box">
            <el-input
              v-model="shipModelMessage.shipPhone"
              placeholder="请输入船长电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="船舶MMSI" class="form-box">
            <el-input
              v-model="shipModelMessage.mmsi"
              placeholder="请输入船舶MMSI"
            ></el-input>
          </el-form-item>
          <el-form-item label="船舶NMMSI" class="form-box">
            <el-input
              v-model="shipModelMessage.nmmsi"
              placeholder="请输入船舶NMMSI"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" class="form-box">
            <el-input
              type="textarea"
              placeholder="请输入备注"
              v-model="shipModelMessage.remark"
            ></el-input>
          </el-form-item>
          <el-form-item label="船舶图片" class="form-box">
            <el-upload
              ref="upload"
              action="none"
              :limit="1"
              style="display: flex;h"
              :before-upload="beforeAvatarUpload"
              :http-request="up_business_license_img"
            >
              <el-button type="primary" size="small">上传</el-button>
              <!-- <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" />
                <span class="el-upload-list__item-actions">
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div> -->
            </el-upload>
          </el-form-item>
        </div>
        <!-- 第二页 -->
        <!-- <div v-if="shipPage == 2" class="form-content">
          <el-form-item label="管理公司" class="form-box">
            <el-input
              v-model="shipModelMessage.company"
              placeholder="请输入管理公司"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理公司地址" class="form-box">
            <el-input
              v-model="shipModelMessage.companyAddress"
              placeholder="请输入管理公司地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理公司联系人" class="form-box">
            <el-input
              v-model="shipModelMessage.contact"
              placeholder="请输入管理公司联系人"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" class="form-box">
            <el-input
              v-model="shipModelMessage.contactPhone"
              placeholder="请输入联系人电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人地址" class="form-box">
            <el-input
              v-model="shipModelMessage.contactAddress"
              placeholder="请输入联系人地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人传真" class="form-box">
            <el-input
              v-model="shipModelMessage.contactFax"
              placeholder="请输入联系人传真"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人邮箱" class="form-box">
            <el-input
              v-model="shipModelMessage.contactEmail"
              placeholder="请输入联系人邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人备注" class="form-box">
            <el-input
              v-model="shipModelMessage.contactRemark"
              placeholder="请输入联系人备注"
            ></el-input>
          </el-form-item>
          <el-form-item label="船东名称" class="form-box">
            <el-input
              v-model="shipModelMessage.owner"
              placeholder="请输入船东名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="船东具体地址" class="form-box">
            <el-input
              v-model="shipModelMessage.ownerAddress"
              placeholder="请输入船东具体地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人姓名" class="form-box">
            <el-input
              v-model="shipModelMessage.ownerContact"
              placeholder="请输入联系人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" class="form-box">
            <el-input
              v-model="shipModelMessage.ownerContactPhone"
              placeholder="请输入联系人电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人地址" class="form-box">
            <el-input
              v-model="shipModelMessage.ownerContactAddress"
              placeholder="请输入联系人地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="	联系人传真" class="form-box">
            <el-input
              v-model="shipModelMessage.ownerContactFax"
              placeholder="请输入联系人传真"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人邮箱" class="form-box">
            <el-input
              v-model="shipModelMessage.ownerContactEmail"
              placeholder="请输入联系人邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人备注" class="form-box">
            <el-input
              v-model="shipModelMessage.ownerContactRemark"
              placeholder="请输入联系人备注"
            ></el-input>
          </el-form-item>
        </div> -->
        <div class="shipBottom">
          <el-button @click="clickPrevious" v-if="shipType == 0" type="info">重置</el-button>
          <el-button @click="clickNext" type="primary">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "addShipMessage",
  data() {
    return {
      dialogVisible: false,
      disabled: false,
      dialogImageUrl: "",
      editing: false,
      shipShow: false,
      editUser: JSON.parse(localStorage.getItem("userInfo")),
      shipPage: 1,
      shipType: 0, //0为新增，1为编辑
      shipModelMessage: {
        kind: "1",
        companyName: "",
        companyId: "",
        deptName: "",
        parentName: "",
        status: "",
        boxId: "",
        enName: "",
        country: "",
        port: "",
        imo: "",
        identification: "",
        name: "",
        company: "",
        companyAddress: "",
        contact: "",
        contactPhone: "",
        contactAddress: "",
        contactFax: "",
        contactEmail: "",
        contactRemark: "",
        owner: "",
        ownerAddress: "",
        ownerContact: "",
        ownerContactPhone: "",
        ownerContactAddress: "",
        ownerContactFax: "",
        ownerContactEmail: "",
        ownerContactRemark: "",
        ownerId: "",
        ownerIds: "",
        file: "", //船舶图片
      },
      selectedFile: "", // 用于存储用户选择的文件
      companyShips: [], //公司船舶
      ownerList: [],
      departmentData: [],
      parentId: 1,
      departmentProps: {
        children: "children",
        label: "deptName",
      },
      rules: {
        deptName: [
          { required: true, message: "请输入船舶名称", trigger: "blur" },
        ],
        imo: [{ required: true, message: "请输入船舶IMO号", trigger: "blur" }],
        identification: [
          { required: true, message: "请输入船舶统一识别号", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getCompanyShips();
  },
  methods: {
    // 限制大小
    beforeAvatarUpload(file) {
      console.log(file);
      const isJPG =
        file.type == "image/png" ||
        "image/jpeg" ||
        "image/jpg" ||
        "image/gif" ||
        "image/webp";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("上传图片只能是图片格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1M!");
      }
      return isJPG && isLt1M;
    },
    // 上传图片
    up_business_license_img(param) {
      this.dialogImageUrl = param.url;
      this.selectedFile = param.file;
      this.$message.success("上传成功");
      this.$refs.upload.clearFiles();
    },
    // 删除图片
    handleRemove(file) {
      this.$refs.upload.clearFiles();
      this.dialogImageUrl = "";
      this.selectedFile = "";
    },
    // 选择部门树
    addDepartmentChange(data, checked, indeterminate) {
      this.shipModelMessage.parentName = data.deptName;
      this.shipModelMessage.parentId = data.id;
    },
    clickNext() {
      const that = this;
      delete this.shipModelMessage.messageList;
      console.log(that.shipModelMessage);
      if (that.shipModelMessage.deptName == "") {
        this.$message.error("请输入船舶名称");
        return;
      } else if (that.shipModelMessage.imo == "") {
        this.$message.error("请输入船舶IMO号");
        return;
      } else if (that.shipModelMessage.identification == "") {
        this.$message.error("请输入船舶统一识别号");
        return;
      }
      // 0为公司 1为船舶, 2为船队
      that.shipModelMessage.kind = "1";
      delete this.shipModelMessage.messageList;
      if (that.shipType == 0) {
        const formData = new FormData();
        for (const key in this.shipModelMessage) {
          formData.append(key, this.shipModelMessage[key]);
        }
        // 添加文件字段
        formData.append("file", this.selectedFile);
        that
          .$axios({
            method: "post",
            url: `/api/department/add`,
            data: formData,
            headers: {
              "Content-Type": "multipart/form-data", // 设置正确的 Content-Type
            },
          })
          .then(function (res) {
            if (res.data.code == 0) {
              that.shipShow = false;
              that.shipPage = 1;
              that.shipModelMessage = {
                ownerIds: "",
                kind: "1",
                deptName: "",
                parentName: "",
                status: "",
                boxId: "",
                enName: "",
                country: "",
                port: "",
                imo: "",
                identification: "",
                name: "",
                company: "",
                deptName: "",
                companyAddress: "",
                contact: "",
                contactPhone: "",
                contactAddress: "",
                contactFax: "",
                contactEmail: "",
                contactRemark: "",
                owner: "",
                ownerAddress: "",
                ownerContact: "",
                ownerContactPhone: "",
                ownerContactAddress: "",
                ownerContactFax: "",
                ownerContactEmail: "",
                ownerContactRemark: "",
              };
              that.$emit("fatherMethod");
              return;
            }
            that.$message.error(that.data.msg);
          });
        return;
      }
      that.editingShip();
    },
    editingShip() {
      const that = this;
      that.shipModelMessage.status =
        that.shipModelMessage.status == "启用"
          ? 0
          : that.shipModelMessage.status == "禁用"
          ? 1
          : that.shipModelMessage.status;
      that.shipModelMessage.ownerId = that.shipModelMessage.ownerIds;

      const formData = new FormData();

      for (const key in this.shipModelMessage) {
        if (key != "children") {
          formData.append(key, this.shipModelMessage[key]);
        }
      }

      // 添加文件字段
      formData.append("file", this.selectedFile);
      that
        .$axios({
          method: "post",
          url: `/api/department/update-by-id`,
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data", // 设置正确的 Content-Type
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.shipShow = false;
            that.shipPage = 1;
            that.shipModelMessage = {
              kind: "1",
              deptName: "",
              parentName: "",
              status: "",
              boxId: "",
              enName: "",
              country: "",
              port: "",
              imo: "",
              identification: "",
              name: "",
              company: "",
              deptName: "",
              companyAddress: "",
              contact: "",
              contactPhone: "",
              contactAddress: "",
              contactFax: "",
              contactEmail: "",
              contactRemark: "",
              owner: "",
              ownerAddress: "",
              ownerContact: "",
              ownerContactPhone: "",
              ownerContactAddress: "",
              ownerContactFax: "",
              ownerContactEmail: "",
              ownerContactRemark: "",
            };
            that.$emit("fatherMethod");
            console.log(res);
          }
        });
    },
    // 获取公司列表
    getCompanyShips() {
      const that = this;
      that
        .$axios({
          method: "get",
          url: `/api/department/dept/ships`,
          params: {
            page: 1,
            count: 999,
            kinds: 0,
            parentId: 0,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.companyShips = res.data.data.list;
            if (that.editUser.role.id != 1) {
              that.shipModelMessage.companyId = res.data.data.list[0].id;
              that.shipModelMessage.companyName =
                res.data.data.list[0].deptName;
              that.getTreeData(that.shipModelMessage.companyId);
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getTreeData(parentId) {
      const that = this;
      that
        .$axios({
          method: "get",
          url: `/api/department/tree?parentId=${parentId}`,
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.departmentData = res.data.data;
            return;
          }
          this.$message.error(res.data.msg);
        })
        .catch((error) => {
          console.log(error);
        });
      let url = `/api/ship/owner/list?page=1&count=999&companyId=${parentId}`;
      that
        .$axios({
          method: "get",
          url: url,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.ownerList = res.data.data.list;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    changeCompany(val) {
      const that = this;
      this.companyShips.forEach((item) => {
        if (item.id == val) {
          that.getTreeData(item.id);
        }
      });
    },
    clickPrevious() {
      const that = this;
      that.shipModelMessage = {
        kind: "1",
        deptName: "",
        parentName: "",
        status: "",
        boxId: "",
        enName: "",
        country: "",
        port: "",
        imo: "",
        identification: "",
        name: "",
        company: "",
        deptName: "",
        companyAddress: "",
        contact: "",
        contactPhone: "",
        contactAddress: "",
        contactFax: "",
        contactEmail: "",
        contactRemark: "",
        owner: "",
        ownerAddress: "",
        ownerContact: "",
        ownerContactPhone: "",
        ownerContactAddress: "",
        ownerContactFax: "",
        ownerContactEmail: "",
        ownerContactRemark: "",
      };
      this.dialogImageUrl = "";
      this.selectedFile = "";
      this.$refs.upload.clearFiles();
    },
  },
};
</script>
<style>
.form-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 20px;
}

.form-content .form-box {
  width: 45%;
}
</style>
